<template>
  <v-app class="app">
    <v-main>
      <qrcode-stream v-if="showScanner" @decode="onDecode" @error="onError" />
      <v-navigation-drawer v-model="drawer" app class="drawer" width="320" />
      <v-app-bar class="app-bar" height="55" scroll-behavior="elevate">
        <template #prepend>
          <v-app-bar-nav-icon @click="drawer = !drawer" />
        </template>
        <div class="searchContainer">
          <div class="search" @click="router.push({ path: '/search', query: { searchText: activeTerm } })">
            <v-icon icon="mdi-magnify" size="20" style="margin-right: 10px" />
            <div class="term">{{ activeTerm }}</div>
            <v-icon icon="mdi-line-scan" size="20" style="margin-left: auto" @click.stop="showScanner = true" />
          </div>
        </div>
      </v-app-bar>
      <v-container class="app-container">
        <router-view />
      </v-container>
      <v-bottom-navigation>
        <v-btn v-for="(v,i) in navBar" :key="i" max-width="30" @click="router.push(v.path)">
          <div class="icon" v-html="v.icon" />
          {{ v.name }}
        </v-btn>
      </v-bottom-navigation>
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>
  import { Hot } from '@/http/api/search'
  import router from '@/router'
  import { onMounted, ref } from 'vue'
  import { QrcodeStream } from 'vue-qrcode-reader'

  const qrCode = ref('')
  const drawer = ref(false)
  const searchTerms = ref([''])
  const activeTerm = ref('')
  const showScanner = ref(false)
  const onDecode = (result: string) => qrCode.value = result
  const onError = (error: string) => console.error(error)
  const navBar = [
    {
      name: '首页',
      path: '/',
      icon: '<svg t="1731465922979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4264" width="16" height="16"><path d="M627.086095 5.11496c28.131779-7.67194 58.821538-7.67194 86.953317 0 33.246739 7.67194 63.936497 23.016819 89.511296 43.476658 10.22992 7.67294 17.901859 15.344879 23.016819 28.131779 7.67294 17.902859 5.11496 38.362698-5.11496 53.707578-7.67194 12.786899-23.016819 23.016819-40.919678 25.573799-12.786899 2.55798-25.573799 0-38.361698-7.67194-5.11496-2.55798-10.22992-10.22992-17.90186-12.7869-17.901859-10.22992-35.804719-20.459839-56.264557-17.902859-15.344879 0-28.131779 7.67294-35.803719 17.902859-10.22992 10.22992-12.787899 23.016819-10.22992 35.803719 7.67194 25.574799 12.786899 53.706578 20.45984 79.281377 51.149598 2.55798 99.740216 15.344879 143.217874 40.919678 40.919678 25.574799 79.280377 58.821538 109.970135 97.183236 25.574799 33.246739 46.034638 71.609437 56.264558 112.529115 12.786899 43.476658 17.901859 89.510296 12.786899 132.986955-2.55698 38.362698-10.22992 74.166417-23.016819 109.971135-33.246739 84.396337-92.069276 161.119733-171.349653 209.712352-56.264558 35.803719-122.759035 58.821538-189.252512 66.493477-46.034638 5.11496-92.069276 5.11496-138.102914-2.55698-94.626256-15.344879-181.579573-61.379517-250.63103-130.430974-66.494477-66.493477-112.529115-153.447794-132.988954-245.51607-7.67194-69.051457-7.67194-138.102914 7.672939-207.154372 17.902859-81.839357 61.379517-161.119733 117.643075-222.499251 48.592618-51.149598 107.414156-89.511296 171.350653-117.643075 7.67194-2.55798 12.786899-5.11496 20.45984-7.67294 15.343879-2.55698 30.689759 0 43.476658 10.22992 17.901859 12.787899 25.573799 33.247739 23.016819 53.706578-2.55698 20.459839-17.901859 38.362698-35.804719 46.034638-63.936497 25.574799-122.758035 69.051457-163.677713 122.759035-38.361698 53.705578-63.936497 112.527115-71.608437 173.906633-7.67194 61.379517 0 122.758035 20.459839 181.579572 30.689759 84.396337 94.626256 156.004774 173.907633 196.924452 48.591618 25.574799 102.298196 38.361698 156.004774 38.361699 43.476658 0 89.511296-7.67194 130.429974-23.016819 35.804719-12.786899 71.609437-33.246739 99.741216-58.821538 28.132779-23.016819 51.149598-53.706578 66.494477-84.396337 7.67194-15.344879 17.901859-33.246739 20.45984-51.149597 15.344879-51.149598 17.901859-107.413156 2.556979-158.561754-12.786899-43.477658-38.361698-81.839357-71.609437-109.971135-15.343879-12.786899-30.689759-25.574799-48.591618-35.804719-15.343879-7.67194-30.689759-15.344879-48.591618-17.901859 12.787899 46.033638 23.017819 92.069276 35.804719 135.544934 2.55798 10.22992 5.11496 23.017819 5.11496 33.247739 2.55798 46.033638-15.344879 94.625256-46.034638 130.429974-28.131779 33.246739-69.051457 58.821538-112.528116 66.494478-46.033638 10.22992-97.183236 0-138.102914-25.574799-38.361698-25.574799-66.493477-63.936497-81.839357-104.856176-7.67194-23.016819-12.786899-48.591618-12.786899-74.166417-2.55698-56.263558 12.787899-109.971135 43.477658-156.004773 35.803719-53.706578 94.625256-92.069276 158.561753-109.971136-5.11496-17.901859-10.22992-35.804719-12.786899-53.706578-12.786899-38.361698-10.22992-81.839357 7.67194-115.086095 10.22992-20.459839 23.017819-38.361698 40.919678-51.149598 23.016819-20.459839 43.476658-33.246739 66.494477-40.918678M478.753261 419.423703c-17.902859 17.901859-28.132779 40.919678-33.247738 63.936497-5.11396 20.459839-5.11396 43.476658 0 66.494477 5.11496 23.016819 17.902859 46.033638 38.362698 61.379518 15.344879 10.22892 35.803719 15.343879 56.263558 10.228919 35.804719-5.11496 63.936497-38.361698 63.936497-74.166416-2.55698-7.67194-2.55698-17.901859-5.11496-25.574799-12.786899-48.591618-25.573799-99.741216-38.361698-148.332834-30.689759 7.67294-58.821538 23.017819-81.839357 46.034638z" fill="#515151" p-id="4265"></path></svg>',
    },
    {
      name: '发现',
      path: '/found',
      icon: '<svg t="1731466523392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4716" width="20" height="20"><path d="M514.1 904c-8.5 0-17.1-0.3-25.8-0.8-39.1-2.4-76-10.2-109.9-23.1C270.3 838.7 193.3 763.7 149.6 657c-14.3-34.9-23.1-72.6-26.1-111.9-0.7-6.2-1.2-12.4-1.7-18.6-0.1-0.6-0.1-1.3-0.1-1.9v-22.9c0-1 0.1-2 0.2-2.9 0.1-1 0.3-2.1 0.4-3.1 0.1-0.6 0.2-1.1 0.2-1.7 0.7-5.9 1.3-11.8 1.9-18 1.4-13.7 2.8-27.8 5.6-42 12.3-60.9 38.5-116.7 77.9-165.7 42.2-52.5 95.2-92 157.6-117.6 37.5-15.4 77-24.7 117.1-27.6 2.9-0.2 6-0.5 9.1-0.7 3.2-0.3 6.4-0.5 9.5-0.8 0.6 0 1.3-0.1 1.9-0.1h20.5c0.8 0 1.7 0 2.5 0.1 1.1 0.1 2.2 0.3 3.2 0.4 0.4 0.1 1 0.1 1.2 0.2 35.6 1.4 70.7 7.7 104.4 18.8 72.1 23.7 132.9 65.2 180.8 123.4 51 62 80.5 134 87.7 214 3.3 37.3 1.3 74.7-6 111.3-8.5 42.8-24.1 83.7-46.4 121.4-37.2 62.7-88.2 111.8-151.7 146.1-57.6 31.1-119.9 46.8-185.2 46.8zM171.7 523.6c0.4 5.5 1 11.1 1.5 16.6 0 0.3 0.1 0.5 0.1 0.8 2.6 34.2 10.2 66.8 22.6 97 38.3 93.4 105.8 159.1 200.5 195.3 29.1 11.1 61.1 17.8 95.1 19.9 65.4 4 127.4-9.4 184.3-40 55.4-29.9 99.9-72.8 132.4-127.5 19.4-32.8 33-68.4 40.4-105.7 6.4-32 8.1-64.6 5.3-97.1-6.3-69.8-32-132.6-76.5-186.7-41.8-50.8-94.9-87-157.8-107.7-29.4-9.6-60.1-15.1-91.1-16.3h-0.3c-2.2-0.1-4.2-0.4-5.6-0.6h-18.3c-2.7 0.2-5.5 0.4-8.3 0.7-3.2 0.3-6.4 0.5-9.5 0.8-35 2.5-69.2 10.6-101.9 24C330.1 219.5 283.8 254 247 299.8c-34.3 42.7-57.2 91.2-67.8 144.2-2.4 11.8-3.6 24-4.9 37-0.6 6.2-1.3 12.6-2 19-0.1 1-0.3 2-0.4 3 0 0.1 0 0.3-0.1 0.4v20.2z m165.2 212.8h-0.7c-16.2-0.4-31-8.8-39.4-22.2-8.5-13.5-9.6-30.3-2.9-45.2 6.6-14.6 13.3-29.4 19.8-43.7 4.7-10.3 9.4-20.6 14-30.9l12.2-26.8c20.5-45 41.7-91.6 62.4-137.4 5.8-13 15.3-22.6 28.3-28.5 0 0 0.1 0 0.1-0.1 77.2-34.9 155.7-70.5 231.6-105l6.2-2.8c14.2-6.5 29.8-6.5 42.8-0.1 12.4 6.1 21.4 17.7 24.6 31.7 3.6 15.4-2.3 28.1-4.3 32.4-24.5 53.7-49.4 108.4-73.4 161.2l-24.6 54c-1.3 2.9-2.7 5.8-4 8.8-2.3 4.9-4.4 9.6-6.5 14.3-5.1 11.6-13.9 20.5-25.5 25.7-40 18.1-80.1 36.3-120.1 54.5-40.1 18.2-80.1 36.4-120.2 54.5-4.3 2.1-8.2 3.2-11.2 3.9l-2.1 0.6c-2.1 0.7-4.6 1.1-7.1 1.1z m114.5-289.3c-1.9 0.9-2.5 1.5-3.4 3.5 0 0 0 0.1-0.1 0.1-20.8 45.9-42 92.5-62.5 137.6L373.2 615c-4.7 10.3-9.4 20.6-14.1 31-5.5 12-11.1 24.4-16.6 36.6 38.2-17.3 76.3-34.6 114.4-51.9 40-18.2 80.1-36.4 120.2-54.5h0.1c0.1 0 0.1 0 0.1-0.1 0 0 0-0.1 0.1-0.2 2.3-5.1 4.6-10.1 6.8-15 1.3-2.9 2.6-5.7 3.9-8.6l24.6-54.1c23.4-51.4 47.5-104.5 71.4-156.7l-1.2 0.5c-75.8 34.6-154.3 70.3-231.5 105.1z m125.9 129.2z m0.3-0.3z" fill="#515151" p-id="4717"></path><path d="M528.6 512.4c-0.1 6.6-7 11.7-15.5 11.6-8.4-0.1-15-5.3-15-11.8 0-6.5 7-11.8 15.4-11.8 8.4 0.1 15.2 5.4 15.1 12z" p-id="4718" fill="#515151"></path><path d="M513.5 549h-0.8c-22.2-0.4-39.6-16.5-39.6-36.8 0-9.3 3.8-18.1 10.6-24.9 7.7-7.6 18.6-11.9 30-11.9h0.1c22.5 0.3 40.1 16.6 39.9 37.2-0.1 9.3-3.9 18.1-10.8 24.8-7.6 7.4-18.3 11.6-29.4 11.6z m-0.1-36.8l-0.1 13.2c1.9 0 3.8-0.9 5.5-2.6 2.6-2.6 4.1-6.4 4.2-10.4l-9.6-0.2z m-9.8-0.1c-0.1 7.4 5.1 13.2 9.6 13.2l0.2-13.2h-9.8z m9.8 0.1l9.7 0.1v-0.1c0-8-5.7-13.1-9.5-13.2-1.8 0-3.8 0.9-5.6 2.7-2.7 2.6-4.3 6.5-4.3 10.5h9.7l0.1-11.8-0.1 11.8z" fill="#515151" p-id="4719"></path></svg>',
    },
    {
      name: '漫游',
      path: '/roam',
      icon: '<svg t="1731466686662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5920" width="20" height="20"><path d="M943.99872 416.616891c0-74.380149-61.480218-134.654231-137.333738-134.654231H399.905035l283.264018-114.211336-29.170493-72.353881-485.542803 195.790424c-2.105108 0.80375-4.190763 1.6075-6.238533 2.506471l-2.506472 1.015694 0.057338 0.152559c-46.626714 21.514902-78.974323 67.873358-78.974323 121.753276v377.493209c0 74.380149 61.479194 134.654231 137.333739 134.654231h588.538499c75.854544 0 137.333739-60.274081 137.333739-134.654231V416.616891zM787.218328 851.186587H237.994977c-43.296015 0-78.399923-35.103908-78.399924-78.399923V438.361144c0-43.296015 35.103908-78.399923 78.399924-78.399924h549.223351c43.296015 0 78.399923 35.103908 78.399923 78.399924v334.42552c0 43.297039-35.103908 78.399923-78.399923 78.399923z" fill="#515151" p-id="5921"></path><path d="M346.004639 477.77049c-70.476075 0-127.590446 57.116419-127.590445 127.592493S275.529589 732.955477 346.004639 732.955477s127.592494-57.116419 127.592494-127.592494S416.480714 477.77049 346.004639 477.77049z m0 177.396323c-27.504631 0-49.80383-22.299198-49.803829-49.80383 0-27.504631 22.299198-49.80383 49.803829-49.80383 27.506679 0 49.805878 22.299198 49.805878 49.80383 0 27.504631-22.298175 49.80383-49.805878 49.80383zM532.397843 497.257075h78.093782v78.706065h-78.093782zM532.397843 634.762827h78.093782v78.706064h-78.093782zM669.292335 497.257075h137.200634v78.706065h-137.200634zM669.292335 634.762827h137.200634v78.706064h-137.200634z" fill="#515151" p-id="5922"></path></svg>',
    },
    {
      name: '笔记',
      path: '/note',
      icon: '<svg t="1731466746793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9069" width="20" height="20"><path d="M849.724 596.322v84.322c0 4.801-1.512 9.101-3.632 13.053-0.169 0.321 0.045 0.685-0.135 1-0.601 1.046-1.585 1.67-2.299 2.608-1.187 1.563-2.339 3.041-3.817 4.323-1.372 1.192-2.844 2.075-4.396 2.968-1.552 0.899-3.047 1.732-4.767 2.328-1.849 0.636-3.71 0.893-5.655 1.141-1.169 0.146-2.198 0.685-3.407 0.685-0.591 0-1.079-0.298-1.658-0.338-1.872-0.107-3.643-0.612-5.486-1.107-1.844-0.495-3.632-0.938-5.307-1.781-0.517-0.259-1.09-0.247-1.602-0.54L619.354 596.323H456.226c-62.093 0-112.428-50.334-112.428-112.428V202.824c0-62.093 50.334-112.428 112.428-112.428h393.499c62.093 0 112.428 50.334 112.428 112.428v281.07c0 62.094-50.334 112.429-112.428 112.429z m56.214-393.499c0-31.047-25.167-56.214-56.214-56.214H456.225c-31.047 0-56.214 25.167-56.214 56.214v281.07c0 31.047 25.167 56.214 56.214 56.214H628.24l0.545 0.321c4.16 0.275 8.303 1.22 12.154 3.446l152.572 88.087v-63.747c0-15.52 12.586-28.107 28.107-28.107h28.107c31.047 0 56.214-25.167 56.214-56.214v-281.07z m-84.321 168.642c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107s28.107 12.586 28.107 28.107c0 15.521-12.586 28.107-28.107 28.107z m-168.642 0c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107 15.52 0 28.107 12.586 28.107 28.107 0 15.521-12.587 28.107-28.107 28.107z m-168.643 0c-15.52 0-28.107-12.586-28.107-28.107 0-15.52 12.586-28.107 28.107-28.107s28.107 12.586 28.107 28.107c0 15.521-12.586 28.107-28.107 28.107z m-365.391 56.213v281.071c0 31.047 25.167 56.214 56.214 56.214h28.107c15.52 0 28.107 12.586 28.107 28.107v63.747l152.572-88.087c3.85-2.227 7.994-3.171 12.154-3.446l0.545-0.321h172.015c31.047 0 56.214-25.167 56.214-56.214h56.214c0 62.093-50.334 112.428-112.428 112.428H405.526L217.315 929.84c-0.512 0.293-1.085 0.281-1.602 0.54-1.675 0.843-3.463 1.287-5.307 1.781-1.844 0.495-3.615 1-5.486 1.107-0.579 0.039-1.068 0.338-1.658 0.338-1.208 0-2.238-0.54-3.407-0.685-1.945-0.247-3.805-0.506-5.655-1.141-1.72-0.596-3.215-1.428-4.767-2.328-1.552-0.893-3.024-1.777-4.396-2.968-1.478-1.282-2.631-2.76-3.817-4.323-0.713-0.938-1.698-1.563-2.299-2.609-0.18-0.315 0.034-0.681-0.135-1-2.119-3.952-3.632-8.252-3.632-13.053v-84.322c-62.093 0-112.428-50.334-112.428-112.428V427.676c0-62.093 50.334-112.428 112.428-112.428h112.428v56.214H175.156c-31.047 0-56.214 25.167-56.214 56.214z" fill="#515151" p-id="9070"></path></svg>',
    },
    {
      name: '我的',
      path: '/mine',
      icon: '<svg t="1731466796245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10226" width="20" height="20"><path d="M704 329.152C704 209.365333 622.848 128 512 128s-192 81.365333-192 201.152C320 454.762667 407.146667 554.666667 512 554.666667s192-99.904 192-225.514667z m42.666667 0C746.666667 476.714667 642.176 597.333333 512 597.333333s-234.666667-120.618667-234.666667-268.181333C277.333333 181.546667 381.824 85.333333 512 85.333333s234.666667 96.213333 234.666667 243.818667zM512.106667 640c408.96 0 404.864 256.512 404.864 256.512 3.093333 23.274667-13.482667 42.154667-37.098667 42.154667H144.32c-23.573333 0-41.088-19.136-37.077333-42.154667 0 0-4.096-256.512 404.864-256.512zM149.909333 896l0.064 3.861333-0.704 3.968c0.682667-3.882667-2.837333-7.829333-4.949333-7.829333H879.872c-2.154667 0-5.504 3.818667-5.205333 6.144l-0.426667-3.157333 0.064-3.157334c0-0.853333-0.128-3.349333-0.533333-7.125333a161.813333 161.813333 0 0 0-4.266667-23.082667 192.96 192.96 0 0 0-35.242667-71.104C780.330667 725.461333 678.634667 682.666667 512.106667 682.666667c-166.549333 0-268.224 42.794667-322.176 111.850666a192.96 192.96 0 0 0-35.242667 71.104c-2.176 8.426667-3.541333 16.192-4.266667 23.082667a81.045333 81.045333 0 0 0-0.512 7.296z" fill="#515151" p-id="10227"></path></svg>',
    },
  ]

  onMounted(async () => {
    searchTerms.value = (await Hot()).result.hots.map(v => v.first)
    const randomIndex = Math.floor(Math.random() * searchTerms.value.length)
    activeTerm.value = searchTerms.value[randomIndex]
    console.log(searchTerms.value)
    setInterval(() => {
      const randomIndex = Math.floor(Math.random() * searchTerms.value.length)
      activeTerm.value = searchTerms.value[randomIndex]
    }, 3000)
  })
</script>

<style lang="scss" scoped>
:deep(.v-bottom-navigation__content) {
  background: #f8f9fd;
}
:deep(.v-container){
  padding: 0 16px;
}
//:deep(.v-btn--variant-text .v-btn__overlay) {
//  background: #f8f9fd;
//}

:deep(.v-app-bar.v-toolbar) {
  background: #f8f9fd;
}

.app-container {
  height: 100%;
}

.drawer {
  padding: 20px;
  background: #f8f9fd
}

.searchContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;

  .search {
    width: 90%;
    height: 30px;
    padding: 0 10px;
    border-radius: 20px;
    color: #7b7e83;
    background-color: #ecedf1;
    border: 1px solid #edeef2;
    display: flex;
    align-items: center;

    .term {
      font-size: 14px;
      color: #c1c1c9;
      font-weight: 100;
      font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    }
  }
}
</style>
